<template>
	<gui-page :customHeader="true" :headerClass="['hulu-bg-color7']" ref="guiPage" :fullPage="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :home="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view style="width:60rpx;"></view>
				<text class="gui-flex1 gui-text-center gui-ellipsis">点单</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template v-slot:gBody>
			<view class="gui-flex1 gui-flex gui-column" style="background-color: #F1F2F5;">

				<!-- 主体区域 -->
				<view class="gui-flex gui-flex1 gui-relative">
					<!-- 左侧分类列表 -->
					<scroll-view :scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true"
						:scroll-into-view="leftTo" class="gui-cate-left gui-absolute-full">
						<view class="gui-cate-left-item gui-border-box" v-for="(item, index) in mainCate" :key="index"
							:class="[currentCateIndex == item.cateid ? 'gui-cate-left-current' : '',
							currentCateIndex==item.cateid+1?'other-style-up':'',
							currentCateIndex==item.cateid-1?'other-style-down':'']" :id="'cate'+item.cateid">
							<text
								:class="['gui-cate-left-item-title','gui-block', currentCateIndex == item.cateid ? 'gui-cate-left-current' : '']"
								:data-cateid="item.cateid" @tap="changCate">{{item.name}}</text>
							<view class="gui-cate-left-item-divider">

							</view>
						</view>
					</scroll-view>
					<!-- 右侧列表 -->
					<scroll-view :scroll-into-view="productListTo" :show-scrollbar="false" :scroll-with-animation="true"
						:scroll-y="true" class="gui-cate-right gui-absolute-full" @scroll="rscroll">
						<!-- 搜索框 -->
						<view class="gui-border-box gui-margin-top">
							<gui-search :customClass="['header-search']"></gui-search>
						</view>
						<!-- 循环展示分类及分类对应的产品列表 -->
						<view class="gui-margin-top" :id="'productList'+cate.cateid" v-for="(cate, idx) in mainCate"
							:key="idx">
							<text class="gui-block gui-h6 gui-bold  gui-cate-right-title">{{cate.name}}</text>
							<!-- 循环展示产品 -->
							<view class="gui-flex gui-rows gui-nowrap gui-cate-product-list" @tap="toDishDetail"
								v-for="(product, pidx) in cate.products" :key="pidx" :id="'products'+product.id"
								:data-parentid="cate.cateid">
								<view class="gui-cate-pimg">
									<image :src="img" mode="aspectFill"
										style="width:196rpx;height:196rpx;border-radius: 16rpx;"></image>
									<!-- <image :src="img" :width="196" :height="196" borderRadius="16rpx"></image> -->
								</view>
								<view class="gui-cate-pbody">
									<text class="gui-text gui-block hulu-font-2">{{product.name}}</text>
									<view class="" style="height:92rpx">

									</view>
									<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
										<view class="gui-flex gui-justify-content-start gui-align-items-end">
											<text class="hulu-font-4">￥</text>
											<text class="hulu-font-3"
												style="font-weight: bold;">{{product.price}}</text>
											<text class="hulu-font-5 hulu-text-color4">元</text>
										</view>
										<view class="" style="width:144rpx;">
											<gui-step-box :width="'144rpx'" :buttonClass="['step-btn']"></gui-step-box>
										</view>
									</view>

								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view @tap="pendantTap" class="hulu-pendant">
					<view class="hulu-box">
						<view class="hulu-cart">
							<image class="face-image" mode="widthFix" src="@/static/assets/cart.png"
								style="width:48rpx;height:48rpx;line-height: 48rpx;"></image>

							<text class="gui-bg-red  gui-color-white hulu-txt">2</text>
						</view>
					</view>
					<view class="hulu-text-color1 hulu-font-1" style="position: absolute;left:88rpx;top:12rpx;">
						<text class="hulu-font-3">￥</text>
						<text class="hulu-font-2">25</text>
					</view>
					<view class="hulu-pay-btn" hover-class="gui-tap" @tap="toPay">
						<text class="hulu-pay-txt">
							去结算
						</text>
					</view>

				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import graceJS from '@/Grace6/js/grace.js';
	import cateChangeData from '@/Grace6/demoData/cateChange.js';
	export default {
		data() {
			return {
				img: "https://images.unsplash.com/photo-1660505465468-c898ea7ff674?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDQ2fHhqUFI0aGxrQkdBfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=200&q=90",
				// 全屏加载，当数据请求完毕时关闭
				pageLoading: true,
				// 核心区域高度
				mainHeight: 300,
				// 左侧分类定位
				leftTo: 'cate',
				// 标识切换时左侧点击触发的
				isLeftTap: false,
				// 左侧分类数据
				mainCate: cateChangeData.products,
				// 当前分类
				currentCateIndex: 1,
				// 延迟执行防止卡顿
				scrollTimer: null,
				// 产品列表滚动定位
				productListTo: ''
			}
		},
		onLoad: function() {
			// 获取页面主体高度从而得出主体高度
			graceJS.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 02. 导航的高度
					// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
					this.mainHeight = e.height - uni.upx2px(110);
					setTimeout(() => {
						this.pageLoading = false;
					}, 1000)
				});
			});
		},
		methods: {
			toPay(){
				uni.navigateTo({
					url:`/subpage/bill/detail`
				})
			},
			changCate: function(e) {
				this.isLeftTap = true;
				var cateid = e.currentTarget.dataset.cateid;
				this.currentCateIndex = cateid;

				if (cateid == 1) {
					this.productListTo = 'productList2';
					this.$nextTick(() => {
						this.productListTo = 'productList' + cateid;
					});
				} else {
					this.productListTo = 'productList' + cateid;
				}
				setTimeout(() => {
					this.isLeftTap = false;
				}, 3000)

			},
			rscroll: function(e) {
				if (this.isLeftTap) {
					return;
				}
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.getIndex();
				}, 100);
			},
			// 动态识别分类激活
			getIndex: function(i) {
				const query = uni.createSelectorQuery()
				query.selectAll('.gui-cate-product-list').boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec((res) => {
					var products = res[0];
					for (let i = 0; i < products.length; i++) {
						if (products[i].top > 0 && products[i].top >= this.mainHeight / 2) {
							this.currentCateIndex = products[i].dataset.parentid,
								this.leftTo = 'cate' + products[i].dataset.parentid;
							break;
						}
					}
				});
			},
			// 搜索
			search: function(e) {
				var kwd = e;
				var searchIndex = -1;
				var index = 0;
				for (var k in this.mainCate) {
					for (var i = 0; i < this.mainCate[k].products.length; i++) {
						if (this.mainCate[k].products[i].name.indexOf(kwd) != -1) {
							searchIndex = this.mainCate[k].products[i].id;
							break;
						}
						index++;
					}
					if (searchIndex != -1) {
						break;
					}
				}
				if (searchIndex != -1) {
					this.productListTo = 'products' + searchIndex;
				}
			},
			toDishDetail(){
				uni.navigateTo({
					url:`/subpage/dish/detail`
				})
			}
		}
	}
</script>

<style lang="scss">
	.header-search {
		background-color: rgba(244, 244, 244, 1);
		border-radius: 16px;
		height: 64rpx;
		line-height: 64rpx;
		padding: 0;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.06);
		// box-shadow: 0px 0px 17rpx 1rpx rgba(0,0,0,0.1);
	}

	.gui-cate-left {
		width: 144rpx;
	}

	.gui-cate-right {
		width: 558rpx;
		left: 168rpx;
	}

	.gui-cate-left-item {
		height: 106rpx;
		padding: 35rpx 0;
		font-size: 26rpx;
		position: relative;
		background-color: #F2E1CA;
	}

	.other-style-down {
		border-top-right-radius: 32rpx !important;
	}

	.other-style-up {
		border-bottom-right-radius: 32rpx !important;
	}

	.gui-cate-left-item-divider {
		position: absolute;
		bottom: 0;
		display: flex;
		margin-left: 10rpx;
		justify-content: center;
		width: 80%;
		height: 2rpx;
		background-color: #E8E8E8;
	}

	.gui-cate-left-item-title {
		height: 100rpx;
		line-height: 32rpx;
		font-size: 28rpx;
		border-left-width: 8rpx;
		text-align: center;
	}

	.gui-cate-left-current {
		background-color: #F4F4F4 !important;
		font-weight: bold;
	}

	.gui-cate-right-title {
		line-height: 48rpx;
	}

	.gui-cate-product-list {
		background-color: white;
		border-radius: 16rpx;
		width: 558rpx;
		height: 244rpx;
		margin: 24rpx 0;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.gui-cate-pimg {
		width: 196rpx;
	}

	.gui-cate-pbody {
		margin-left: 16rpx;
		flex: 1;
	}



	.pendant {
		border-radius: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 55rpx;
	}

	.step-btn {
		padding: 0;
		margin: 0;
		width: 40rpx;
		height: 40rpx;
		line-height: 44rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		color: white;
		background-color: #B88C4D;
		border-radius: 40rpx;
	}

	.hulu-pendant {
		position: absolute;
		bottom: 64rpx;
		left: 24rpx;
		width: 702rpx;
		z-index:100 !important;
		height: 92rpx;
		border-radius: 92rpx;

		background-color: rgba(255, 255, 255, 0.91);
		box-shadow: 0px 0px 17rpx 1rpx rgba(0,0,0,0.1);
		.hulu-box {
			border-radius: 68rpx;
			position: relative;

			.hulu-cart {
				width: 68rpx;
				position: absolute;
				height: 68rpx;
				border-radius: 68rpx;
				background-color: #B88C4D;
				left: 12rpx;
				top: 12rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.face-image {
					width: 60rpx;
					height: 60rpx;
				}

				.hulu-txt {
					border-radius: 38rpx;
					height: 38rpx;
					line-height: 38rpx;
					padding: 0 13rpx;
					font-size: 22rpx;
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}
			}
		}


		.hulu-pay-btn {
			color:white;
			width:188rpx;
			height:68rpx;
			position: absolute;
			right:12rpx;
			top:12rpx;
			background-color: #B88C4D;
			border-radius: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.hulu-pay-txt{
				line-height: 68rpx;
				width:188rpx;
				text-align: center;
			}
		}
	}
</style>